
<!DOCTYPE html>

<html class="no-js" lang="">
	
	<head>
		
		<title>UITextField</title>
		
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		
		<meta name="description" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		
	</head>
	
	<body>
		
		<UITextField id="t1" class="field" tabindex="1" placeholder="1 - (Required) Nickname"
			keyboard-type="ascii"
			return-key-type="next"
			auto-capitalization
			auto-correction
			spell-checking>
		</UITextField>
		
		<UITextField id="t2" class="field" tabindex="2" placeholder="2 - (Required) Username"
			keyboard-type="ascii"
			return-key-type="next">
		</UITextField>
		
		<UITextField id="t3" class="field" tabindex="3" placeholder="3 - (Required) Password"
			return-key-type="next"
			is-secure
			auto-clears>
		</UITextField>
		
		<UITextField id="t4" class="field" tabindex="4" placeholder="4 - (Required) Confirm password"
			return-key-type="done"
			is-secure
			auto-clears
			onreturn="@selector(submit:)">
		</UITextField>

		<UIButton class="button" onclick="@selector(submit:)">Submit</UIButton>

		<style>
			
			body {
				width: 100%;
				height: 100%;
				background-color: white;
			}

			.field {
				margin-top: 20px;
				margin-left: auto;
				margin-right: auto;
				display: block;
				width: 80%;
				height: 34px;
				color: black;
				font-weight: bold;
				border-radius: 5px;
				border-color: #333;
				border-width: 1px;
				border-style: solid;
			}

			.error {
				border-radius: 5px;
				border-color: red;
				border-width: 3px;
				color: red;
			}

			.button {
				display: block;
				margin: 0 auto;
				margin-top: 40px;
				padding: 0;
				width: 100px;
				height: 44px;
				color: white;
				background-color: #333;
				border-radius: 10px;
				border-color: darkgray;
				border-width: 1px;
			}

		</style>
		
	</body>
	
</html>
